<template>
  <div class="loginContainer">
    <!-- 组件 -->
    <!-- 头部 -->
    <div class="logo">
      <img src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" alt="" />
    </div>

    <!-- 用户 -->
    <div class="userInfo">
      <div class="input-text">
        <!-- <label class="label">请输入手机号</label> -->
        <div class="userPhone">
          <input @change="handleChange" class="phone" type="text" placeholder="请输入手机号" v-model="phone"/>
        </div>
        <div class="userPwd">
          <input class="pwd" type="text" placeholder="请输入密码" v-model="password" />
        </div>
      </div>
    </div>

    <!-- 登录 -->
    <div class="btn">
      <van-button type="danger" block @click="handleLogin">登录</van-button>
    </div>

    <!-- 条款 -->
    <div class="article">
      <van-checkbox v-model="checked"></van-checkbox>
      <p>
        <span>我同意</span>
        <span class="serve">《服务条款》</span>
        <span>和</span>
        <span class="serve">《网络隐私条款》</span>
      </p>
    </div>
  </div>
</template>

<script>
import { reqLogin } from "@/api";
import { saveToken } from "@/utils/auth";
export default {
  name: "",
  data() {
    return {
      checked: true,
      phone: "",
      password: "",
    };
  },

  methods: {
    handleChange(event){
      const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;

      if (!reg.test(this.phone)) {
        this.$notify({ type: "primary", message: "手机号不正确" });
        return;
      }
    },
    //跳到个人中心
    async handleLogin() {
        //获取参数
      const { phone, password } = this;
      const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;

      if (!reg.test(phone)) {
        this.$notify({ type: "primary", message: "手机号不正确" });
        return;
      }
      //请求登录
      let result = await reqLogin({ phone, password });
      if (result.code == 200) {
        //登陆成功
        //登录成功之后保存token
        saveToken(result.data.token);
        this.$notify({ type: "success", message: "登录成功" });
        localStorage.setItem("userInfo", JSON.stringify(result.data));
        //跳转到主页
        this.$router.push('/personal');
      } else {
        this.$notify({ type: "primary", message: "通知内容" });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.loginContainer {
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
  .logo {
    text-align: center;
    margin-top: 48px;
    margin-bottom: 38px;
    img {
      width: 149px;
      height: 50px;
    }
  }
  .userInfo {
    .input-text {
      text-align: center;
      font-size: 19px;
      .userPhone {
        border-bottom: 1px solid #8cbe97;
        .phone {
          border: none;
          padding: 10px;
          width: 100%;
        }
      }
      .userPwd {
        border-bottom: 1px solid #c5cddb;
        .pwd {
          border: none;
          padding: 10px;
          width: 100%;
        }
      }
    }
  }

  .btn {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 20px;
  }

  .article {
    display: flex;
    p {
      line-height: 10px;
      margin-left: 5px;
      span {
        font-size: 12px;
        &.serve {
          color: rgba(32, 12, 214, 0.911);
        }
      }
    }
  }
}
</style>